<template>
<!-- 轮播图和商品 -->
<div class="home">
  <div class="w-box">
    <!-- element ui 跑马灯的组件 interval切换时长 -->
    <el-carousel :interval="5000" indicator-position="outside" arrow="always">
      <!-- v-for循环banner 根据id -->
      <el-carousel-item v-for="item in banner" :key="item.id">
        <!-- v-if判断 -->
        <img v-if='item.picUrl' class="img" :src="item.picUrl" alt="">
        <img v-if='item.picUrl2' class="img2" :src="item.picUrl2" alt="">
        <img v-if='item.picUrl3' class="img3" :src="item.picUrl3" alt="">
      </el-carousel-item>
    </el-carousel>
  </div>
  <!-- 商品卡片 -->
  <div v-for="item in homeList" :key="item.id">
    <!-- card组件 -->
    <div class="card">
      <!-- 判断 -->
      <section class="w mt30 clearfix" v-if="item.type===3">
        <!-- 从item取出name -->
        <!-- m-shelf是复用组件 :title把item.name传过去 -->
        <m-shelf :title="item.name">
          <div slot="content" class="floors">
            <!-- 调用MallGoods组件 循环panelContents :goods把0传过去 -->
            <mall-goods v-for='(o, i) in item.panelContents' :key="i" :goods='o'>
            </mall-goods>
          </div>
        </m-shelf>
      </section>
    </div>
  </div>
</div>
</template>

<script>
    export default {

    }
</script>
<script>
    // 导入商品组件
    // MShelf是标题组件
    // MallGoods商品卡片组件
    import MShelf from '@/components/Shelf'
    import MallGoods from '@/components/MallGoods'
    export default {
        data() {
            return {
                // 轮播图放数据的地方
                banner: [],
                // home所有数据
                homeList: []
            }
        },
        // 组件引用
        components: {
            MShelf,
            MallGoods
        },
        // created在html前调用
        async created() {
            // try catch 错误异常处理
            try {
                // $http axios,main.js中全局引入
                const res = await this.$http.get('http://127.0.0.1:3000/api/home')
                    // console.log(res);
                    //res得到所有请求来的数据,异步
                    // 拿到data数据
                let data = res.data;
                // console.log(data)
                // 做判断，看是否code===200
                if (data.code === 200) {
                    // 拿到data下的result
                    let result = data.result;
                    // console.log(result)
                    // 赋值 data中homeList，this指向
                    this.homeList = result
                        //find遍历 拿到item=0的数据
                    let item = result.find(item => item.type === 0);
                    // 返回数据，赋值
                    // 赋值 data中homeList，this指向
                    this.banner = item.panelContents
                        // console.log(result)
                }
            } catch (error) {
                console.log(error.message);
            }
        }

    }
</script>

<style lang="less" scoped>
    .home {
        width: 1200px;
        margin: 0 auto;
    }
    
    .w-box {
        width: 1200px;
        height: 300px;
        margin: 0 auto;
        background-color: #eeeeee;
    }
    
    .img {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        border-radius: 10px;
    }
    
    .img2 {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        border-radius: 10px;
    }
    
    .img3 {
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        border-radius: 10px;
    }
    
    .card {
        margin-top: 30px;
    }
    
    .floors {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        .imgbanner {
            width: 50%;
            height: 430px;
            .cover-link {
                cursor: pointer;
                display: block;
                position: absolute;
                top: 60px;
                left: 0;
                width: 50%;
                height: 430px;
                z-index: 4;
                background: url() repeat;
            }
            .cover-link:hover {
                box-shadow: inset 0 0 38px rgba(0, 0, 0, 0.08);
                transition: all 0.15s ease;
            }
        }
        img {
            display: block;
            width: 100%;
            height: 100%;
        }
    }
</style>